import React from "react";
import { Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import './BookItem.scss'
function BookItem({ book, width }) {
   let navigate = useNavigate();
   return (
      <li className="book_item"
         onClick={() => navigate("/book?id=" + book.id + "&title=" + book.title)}
      >
         <Image
            src={book.cover + "?imageView&thumbnail=240y336"}
            width={width + "vw"}
            height={width * 1.3 + "vw"}
            style={{ borderRadius: 4 }} 
            fit="fill"
            lazy={true}
         />
         <div className="info" style={{ width: 88 - width + "vw" }}>
            <h3 className="title">{book.title}</h3>
            <p className="author">
               {book.author} / {book.category}
            </p>
            <p className="intro">{book.content || book.summary}</p>
         </div>
      </li>
   );
}

export default BookItem;